<template>
  <div>
    <div id="tools-bar" class="slide-in-top">
      <div class="left-tools-bar">
        <ul class="text-operation operate" @click="getSize">
          <el-tooltip effect="dark" content="尺寸" placement="bottom">
            <el-popover placement="bottom-start" width="200" trigger="click">
              <el-row class="sizeClass">
                <el-col :span="5" style="line-height:38px">
                  <span>宽度</span>
                </el-col>
                <el-col :span="19">
                  <el-input
                    size="small"
                    type="number"
                    v-model="sizewidth"
                    @keyup.enter.native="changeSize"
                  >
                    <template slot="append"
                      >mm</template
                    >
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="sizeClass">
                <el-col :span="5" style="line-height:38px">
                  <span>高度</span>
                </el-col>
                <el-col :span="19">
                  <el-input
                    size="small"
                    type="number"
                    v-model="sizeheight"
                    @keyup.enter.native="changeSize"
                  >
                    <template slot="append"
                      >mm</template
                    >
                  </el-input>
                </el-col>
              </el-row>
              <li slot="reference" class="text-btn tips">
                <span class="icon imgSize"></span>
              </li>
            </el-popover>
          </el-tooltip>
          <li class="art-text"><span>换图</span></li>
          <li class="color tips">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="color1"
            ></el-color-picker>
          </li>
        </ul>
      </div>
      <div class="right-tools-bar">
        <rightTool :selectedObj="selectedObj"></rightTool>
      </div>
    </div>
  </div>
</template>

<script>
import rightTool from "./rightTool";
import { mapGetters, mapActions } from "vuex";

export default {
  components: { rightTool },
  props: { selectedObj: {} },
  data() {
    return {
      color1: "#000",
      sizewidth: 0,
      sizeheight: 0,
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ]
    };
  },
  computed: {
    ...mapGetters(["canvas", "undoList", "redoList"])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getSize() {
      this.sizewidth =
        ((this.selectedObj.width * 25.4) / 96) * this.selectedObj.scaleX;
      this.sizeheight =
        ((this.selectedObj.height * 25.4) / 96) * this.selectedObj.scaleY;
    },
    changeSize() {
      console.log(this.selectedObj);
      //   this.selectedObj.width = (this.sizewidth * 96) / 25.4;
      //   this.selectedObj.height = (this.sizeheight * 96) / 25.4;

      //调整比例
      this.selectedObj.scaleX =
        (this.sizewidth * 96) / 25.4 / this.selectedObj._element.naturalWidth;
      this.selectedObj.scaleY =
        (this.sizeheight * 96) / 25.4 / this.selectedObj._element.naturalHeight;

      this.$forceUpdate();
      this.canvas.requestRenderAll();
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../styles/centerPanel/wordcss.less";

.sizeClass /deep/.el-input__inner {
  width: 100% !important;
  padding: 0 15px !important;
}
.sizeClass /deep/.el-input-group__append {
  padding: 0 6px !important;
}
</style>
